<template>
  <div class="template-content">
    <div class="layout">
      <Layout :style="{minHeight: '100vh'}">
        <Sider collapsible :collapsed-width="0" v-model="isCollapsed" :style="{background: '#e0e0e0',width: '400px'}" class="ivu-card ivu-card-bordered">
          <Devicetree ref="deviceTree" @on-playbtnclick="play" @on-select-change="selectChange"/>
        </Sider>
        <Layout :style="{padding: '0 10px 10px'}">
          <Content :style="{padding: '10px', minHeight: '680px', background: '#fff'}">
<!--            <div class="baidumap" id="allmap"></div>-->
            <baidu-map
              :center="center"
              class="baidumap"
              ak="IfkNE0XDdoaTwdGGkOWrALDkFZOTI9b8"
              :zoom="zoom"
              :scroll-wheel-zoom="true"

              @ready="mapReady">
              <!--  刻度尺  -->
              <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
              <!-- 缩放导航条 -->
              <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
              <!--  点 -->
              <bm-marker :position="marker.point" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
                <bm-label :content="marker.label.content" :labelStyle="{color: 'green', fontSize : '16px'}" :offset="{width: -35, height: 30}"/>
              </bm-marker>
              <!-- 弹窗 -->
              <bm-info-window :position="marker.infoWindow.point"
                              :title="marker.infoWindow.title"
                              :show="marker.infoWindow.show"
                              @close="infoWindowClose"
                              @open="infoWindowOpen">
                <ul style='padding-top:10px;'>
                  <li>设备名：{{marker.infoWindow.deviceData.deviceName}}</li>
                  <li>设备号：{{marker.infoWindow.deviceData.deviceId}}</li>
                  <li>通道号：{{marker.infoWindow.deviceData.channel}}</li>
                  <li>在线状态：{{marker.infoWindow.deviceData.online}}</li>
                  <li>经纬度：{{marker.infoWindow.deviceData.lng}},{{marker.infoWindow.deviceData.lat}}</li>
                  <li><button>布防/撤防</button></li>
                  <li><button>看守位开启/关闭</button></li>
                  <li><button>看守位/关闭</button></li>
                  <li><button>录像开始/结束</button></li>
                  <li><button>报警复位</button></li>
                  <li><button>远程启动</button></li>
                </ul>
                <p v-text="marker.infoWindow.contents"></p>
                <button @click="clear">Clear</button>
              </bm-info-window>

            </baidu-map>
<!--            <baidu-map class="bm-view" ak="YOUR_APP_KEY"></baidu-map>-->
          </Content>
        </Layout>
      </layout>
      <DevicePlayer ref="devicePlayer" ></DevicePlayer>
    </div>
  </div>
</template>

<script>
/*import {BaiduMap} from 'vue-baidu-map/components/map/Map.vue'*/
/*import {bmScale} from 'vue-baidu-map/components/controls/Scale.vue'*/
import Devicetree from "_c/topnav/DeviceTree";
import {getMapInfo} from "@/api/mapinfo";
import DevicePlayer from '../Player/DevicePlayer.vue';
import {playStart} from "@/api/Apiproxy";
import {apiResult} from "@/libs/util";
export default {
  components: {Devicetree,DevicePlayer},
/*  components:{bmMap,Devicetree,bmScale},*/
  data(){
    return {
      isCollapsed:false,
      mapInfo: {
        centerLongitude:114.236262,
        centerLatitude:22.677236,
        minZoom:2,
        maxZoom:20,
        defaultZomm:14,
        mode: 'ONLINE'
      },
      center: {lng: 0, lat: 0},
      zoom: 15,
      /** 标注点 */
      marker:{
        point:{lng:0,lat:0},
        //content:"我是我",
        label:{
          content:"我是我",
        },
        infoWindow:{
          point:{},
          show: true,
          title:null,
          contents: '',
          deviceData:{
            deviceName:null,
            deviceId:null,
            channel:null,
            online:"在线",
            lng:0,
            lat:0,
          }
        },

      }
    }
  },
  methods: {
    infoWindowClose (e) {
      this.marker.infoWindow.show = false
    },
    infoWindowOpen (e) {
      this.marker.infoWindow.show = true
    },
    clear () {
      this.marker.infoWindow.contents = ''
    },
    /** 地图加载完后 */
    mapReady ({BMap, map}) {
      this.center.lng = this.mapInfo.centerLongitude;
      this.center.lat = this.mapInfo.centerLatitude;
      this.zoom = this.mapInfo.defaultZomm;
    },

    /** 设备点击 */
    selectChange(nodes,data){
      console.log(nodes);
      console.log(data);

      this.marker.infoWindow.deviceData.deviceId = data.title;

      let online="离线";
      if ("1"==data.online){online="在线";}
      this.marker.infoWindow.deviceData.deviceName = data.title;
      this.marker.infoWindow.deviceData.deviceId = data.arrt.code;
      this.marker.infoWindow.deviceData.channel = data.arrt.channel;
      this.marker.infoWindow.deviceData.online = online;
      this.marker.infoWindow.deviceData.lng = data.longitude;
      this.marker.infoWindow.deviceData.lat = data.latitude;
      /** 点坐标 */
      this.marker.point={lng:data.longitude,lat:data.latitude};
      /** 弹窗坐标 */
      this.marker.infoWindow.point={lng:data.longitude,lat:data.latitude};
      this.marker.infoWindow.title=data.title;

      //this.marker.infoWindow.contents = sContent;
      this.marker.infoWindow.show=true;

    },
    play(node,data){
      let serverId=data.arrt.gbServerId;
      let deviceId=data.arrt.code;
      let channelId=data.arrt.channel;
      console.log("通知设备推流：" + deviceId + " : " + channelId);

      playStart(serverId,deviceId,channelId).then(res=>{
        apiResult(res.data,false,result=>{
          this.$refs.devicePlayer.openDialog("media",serverId,deviceId,channelId, {
            streamInfo: res.data.data,
            hasAudio: false,
          });
        });
      })
    },
  },
  mounted() {
    getMapInfo().then(res => {
      apiResult(res.data,false,result=>{
        this.mapInfo.centerLongitude = res.data.data.centerLongitude;
        this.mapInfo.centerLatitude = res.data.data.centerLatitude;
        this.mapInfo.minZoom = res.data.data.minZoom;
        this.mapInfo.maxZoom = res.data.data.maxZoom;
        this.mapInfo.mode = res.data.data.mode;
        /** 点坐标 */
        this.marker.point={lng:this.mapInfo.centerLongitude,lat:this.mapInfo.centerLatitude};
        /** 弹窗坐标 */
        this.marker.infoWindow.point={lng:this.mapInfo.centerLongitude,lat:this.mapInfo.centerLatitude};
        this.marker.infoWindow.title="this title";
        this.marker.infoWindow.show=true;

      })
    })
    //this.createBaiduMap();
  },
}
</script>
<style lang="less">
@import ".././template";
.layout-con{
  height: 100%;
  width: 100%;
}
.ivu-layout-sider-trigger {
  position: fixed;
  bottom: 0;
  text-align: center;
  cursor: pointer;
  height: 48px;
  line-height: 48px;
  color: #252525;
  background: #f3f3f3;
  z-index: 1000;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.ivu-tree-title {
  display: inline-block;
  margin: 0;
  padding: 0 4px;
  border-radius: 3px;
  cursor: pointer;
  vertical-align: top;
  color: #45f803;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.top_nav_01{
  z-index: 999999999;
}


/* 去除百度地图版权那行字 和 百度logo */
/*.baidumap > .BMap_cpyCtrl {
  display: none !important;
}
.baidumap > .anchorBL {
  display: none !important;
}

.bm-view {
  width: 100%;
  height: 100%;
}*/
</style>
